<template>
  <div>
    <!-- 使用 v-chart 组件渲染柱状图 -->
    <Echart
      :options="chartOptions"
      :autoresize="true"
      style="width: 100%; height: 330px"
    />
  </div>
</template>

<script>
import "echarts/lib/chart/bar"; // 引入柱状图模块
import "echarts/lib/component/tooltip"; // 引入提示框组件
import "echarts/lib/component/title"; // 引入标题组件
import "echarts/lib/component/legend"; // 引入图例组件
import { mapState } from "vuex";

export default {
  components: {},
  props: {
    // 接收外部传入的数据
    // chartData: {
    //   type: Array,
    //   required: true,
    // },
    // 接收外部传入的标签
    // xAxisLabels: {
    //   type: Array,
    //   required: true,
    // },
    // 接收外部传入的标题
    title: {
      type: String,
      default: "订单统计",
    },
  },
  computed: mapState({
    xAxisLabels: function (state) {
      return state.data.orderData.orderWeekTrend.map((x) => x.date);
    },
    machineWeightDatas: function (state) {
      return state.data.orderData.orderWeekTrend.map((x) => x.machineWeight);
    },
    onlineWeightDatas: function (state) {
      return state.data.orderData.orderWeekTrend.map((x) => x.onlineWeight);
    },
    totalWeightDatas: function (state) {
      return state.data.orderData.orderWeekTrend.map((x) => x.totalWeight);
    },
  }),
  data() {
    return {
      chartOptions: {
        title: {
          text: this.title,
          left: "left",
          show: false,
        },
        tooltip: {
          trigger: "axis", // 触发类型，可以选择'item'或者'axis'
          axisPointer: {
            type: "shadow", // 指定轴的指示器类型
          },
          formatter: function (params) {
            let tooltipText = "";
            params.forEach(function (param) {
              tooltipText += param.seriesName + ": " + param.value + "<br>";
            });
            return tooltipText;
          },
        },
        legend: {
          bottom: "bottom", // 图例的下边位置
          itemWidth: 20, // 图例标记的宽度
          itemHeight: 14, // 图例标记的高度
          textStyle: {
            color: "#d3d6dd", // 图例文字颜色
            fontSize: 14, // 图例文字大小
            fontStyle: "normal", // 图例文字样式：'normal', 'italic', 'oblique'
            fontWeight: "normal", // 图例文字粗细：'normal', 'bold', 'lighter'
          },
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            rotate: -45, // 设置X轴文字旋转45度
            fontSize: 10, // 设置文字大小
            color: "#d3d6dd", // 设置文字颜色
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单总量",
            type: "bar",
            data: [],
            barWidth: "20%", // 柱状图宽度
            itemStyle: {
              color: "#D58806", // 柱状图颜色
            },
            label: {
              show: true,
              position: "top",
              fontSize: 8,
            },
          },
          {
            name: "线上订单",
            type: "bar",
            data: [],
            barWidth: "20%", // 柱状图宽度
            itemStyle: {
              color: "#2684FE", // 柱状图颜色
            },
            label: {
              show: true,
              position: "top",
              fontSize: 8,
            },
          },
          {
            name: "机器订单",
            type: "bar",
            data: [],
            barWidth: "20%", // 柱状图宽度
            itemStyle: {
              color: "#69BA6D", // 柱状图颜色
            },
            label: {
              show: true,
              position: "top",
              fontSize: 8,
            },
          },
        ],
      },
    };
  },
  watch: {
    // 监听 xAxisLabels 的变化，动态更新图表
    xAxisLabels: {
      handler(newval, oldval) {
        this.chartOptions.xAxis.data = newval;
      },
      immediate: true,
    },
    // 监听 chartData 的变化，动态更新图表
    machineWeightDatas: {
      handler(newval, oldval) {
        this.chartOptions.series[2].data = newval;
      },
      immediate: true,
    },
    onlineWeightDatas: {
      handler(newval, oldval) {
        this.chartOptions.series[1].data = newval;
      },
      immediate: true,
    },
    totalWeightDatas: {
      handler(newval, oldval) {
        this.chartOptions.series[0].data = newval;
      },
      immediate: true,
    },
  },
  mounted() {
    console.log("mounted>>>", this.machineWeightDatas);
  },
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>
